<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="title"
      align="center"
      :visible.sync="innerDialogFormVisible"
      @closed="closeDialog"
    >
      <div>
        <el-row>
          <el-col :span="2">
            <div style="text-align: left">
              <span>选择供应商</span>
            </div>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="formData.foreignKeyId"
              :disabled="readOnlyInfo"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.supplierName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col v-if="!readOnlyInfo" :span="2">
            <el-button type="primary" @click="confirm">确定</el-button>
          </el-col>
        </el-row>
        <el-row v-if="readOnlyInfo">
          <el-col :span="24">
            <el-table
              ref="evaluationTable"
              :data="evaluationTable"
              fit
              highlight-current-row
            >
              <el-table-column label="评定单编号" prop="num" />
              <el-table-column label="创建人" prop="createorName" />
              <el-table-column label="创建时间" prop="createTime">
                <template slot-scope="scope">
                  <span>{{ formatTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" prop="state">
                <template slot-scope="scope">
                  <span>{{ Status[scope.row.state] }}</span>
                </template>
              </el-table-column>
              <el-table-column label="通过时间" prop="passTime">
                <template slot-scope="scope">
                  <span>{{ formatTime(scope.row.passTime) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table
              ref="multipleTable"
              :data="multipleTable"
              fit
              highlight-current-row
            >
              <el-table-column label="供应商名称" prop="supplierName" />
              <el-table-column label="供应产品" prop="supplyProduct" />
              <el-table-column label="联系人" prop="contact" />
              <el-table-column label="联系电话" prop="phone" />
              <el-table-column label="联系地址" prop="address" />
            </el-table>
          </el-col>
        </el-row>
        <div style="text-align: left">
          <span>评定项目</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-table
              :data="formData.detectionList"
              element-loading-text="Loading"
              fit
              border
              style="width: 100%"
            >
              <el-table-column label="项目类型" width="200px">
                <template slot-scope="scope">
                  {{ scope.row.itemType + "(" + scope.row.scoreLine + "分)" }}
                </template>
              </el-table-column>
              <el-table-column label="评分标准">
                <template slot-scope="scope">
                  <div>
                    <el-row
                      v-for="item in scope.row.evaluationStandardList"
                      :key="item.id"
                    >
                      <el-col>
                        <el-checkbox
                          v-model="item.checked"
                          :disabled="readOnlyInfo"
                          :true-label="1"
                          :false-label="0"
                          >{{ item.sort + "、" + item.content }}</el-checkbox
                        >
                      </el-col>
                    </el-row>
                    <el-row v-if="scope.row.remark">
                      <el-col>
                        <span> 备注：{{ scope.row.remark }} </span>
                      </el-col>
                    </el-row>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="150px">
                <template #header>
                  <span style="color: red">*</span>
                  <span>得分</span>
                </template>
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.score"
                    :disabled="readOnlyInfo"
                    autocomplete="off"
                    @input="handleInput(scope.row)"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-table
              :data="formData.list"
              element-loading-text="Loading"
              fit
              border
              style="width: 100%"
            >
              <el-table-column label="累计得分" prop="score" width="100px" />
              <el-table-column prop="opinion" width="200px">
                <template #header>
                  <span style="color: red">*</span>
                  <span>评价意见</span>
                </template>
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.opinion"
                    :disabled="readOnlyInfo"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in OpinionList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="背景材料">
                <template slot-scope="scope">
                  <el-row>
                    <el-col
                      v-for="item in scope.row.materilaData"
                      :key="item.value"
                      :span="8"
                    >
                      <el-checkbox
                        v-model="item.checked"
                        :disabled="readOnlyInfo"
                        :true-label="1"
                        :false-label="0"
                        >{{ item.content }}</el-checkbox
                      >
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column label="备注" prop="remark" width="300px">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.remark"
                    type="textarea"
                    :disabled="readOnlyInfo"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button v-if="readOnlyInfo" type="primary" @click="download"
          >下 载</el-button
        >
        <el-button v-if="!readOnlyInfo" type="primary" @click="onSubmit(10)"
          >保 存</el-button
        >
        <el-button
          v-if="!readOnlyInfo"
          style="width: 130px"
          type="primary"
          @click="onSubmit(20)"
          >保存并提交</el-button
        >
        <el-button v-if="!readOnlyInfo" @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictList } from "../../../api/System/SystemDict.js";
import {
  exportWord,
  DownloadExportExcel,
} from "../../../api/Evaluation/EvaluationExport.js";
import { getListNoPage } from "../../../api/Supplier/Supplier.js";
import { getList } from "../../../api/Evaluation/EvaluationItem.js";
import { Get } from "../../../api/Evaluation/Evaluation.js";
import { create, update } from "../../../api/Evaluation/SupplierEvaluation.js";
import { formatTime } from "../../../utils/time";
import { Status } from "../../../api/Supplier/SupplierEvaluation.js";
export default {
  name: "SupplierEvaluationDialog",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    readOnlyInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    foreignKeyId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      OpinionList: [
        {
          value: 1,
          label: "合格",
        },
        {
          value: 2,
          label: "不合格",
        },
      ],
      formatTime,
      Status,

      title: "发起评定",
      loading: false,
      innerDialogFormVisible: false,
      multipleTable: [],
      options: [],
      materialData: [],
      evaluationTable: [],

      formData: {
        id: 0,
        type: 10,
        num: "",
        creatorId: 0,
        createTime: null,
        foreignKeyId: "",
        detectionList: [],
        list: [
          {
            score: 0,
            materilaData: [],
          },
        ],
        materilaData: [],
        score: 0,
        remark: "",
        opinion: 0,
        state: 0,
      },
    };
  },
  watch: {
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    getListNoPage().then((res) => {
      this.options = res.data;
      if (this.foreignKeyId) {
        this.formData.foreignKeyId = this.foreignKeyId;
        this.confirm();
      }

      this.title = "发起评定";
      if (this.id) {
        this.title = this.readOnlyInfo ? "评定详情" : "评定编辑";
        this.init();
      } else {
        getList().then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            for (
              let o = 0;
              o < res.data[i].evaluationStandardList.length;
              o++
            ) {
              res.data[i].evaluationStandardList[o].checked = 0;
            }
          }
          this.formData.detectionList = res.data;
        });
        // 查询字典表
        // 业务类型
        getDictList({ dictCode: "Material" }).then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].checked = 0;
            res.data[i].content = res.data[i].value;
          }
          this.formData.list[0].materilaData = res.data;
        });
      }
    });
  },
  methods: {
    // 下载
    download() {
      exportWord({ id: this.id }).then((res) => {
        DownloadExportExcel({ path: res.data }).then((res) => {
          this.uploadLoad = false;
          var blob = new Blob([res.data], {
            type: "application/octet-stream",
          });
          var url = window.URL.createObjectURL(blob);
          const link = document.createElement("a"); // 创建a标签
          link.href = url;
          link.download = "供应商评定记录.docx"; // 重命名文件
          link.click();
          URL.revokeObjectURL(url); // 释放内存
        });
      });
    },
    init() {
      Get({ id: this.id }).then((res) => {
        this.evaluationTable = [
          {
            num: res.data.num,
            createTime: res.data.createTime,
            state: res.data.state,
            passTime: res.data.passTime,
            createorName: res.data.createorName,
          },
        ];
        this.formData = res.data;
        this.formData.list = [
          {
            opinion: this.formData.opinion,
            score: this.formData.score,
            remark: this.formData.remark,
            materilaData: this.formData.sysBusinessEvaluationMaterials,
          },
        ];
        this.confirm();
      });
    },
    confirm() {
      var data = this.options.find((x) => x.id === this.formData.foreignKeyId);
      this.multipleTable = [];
      this.multipleTable.push(data);
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.$emit("close");
      this.cancel();
    },
    onSubmit(state) {
      this.formData.materilaData = this.formData.list[0].materilaData;
      this.formData.score = this.formData.list[0].score;
      this.formData.remark = this.formData.list[0].remark;
      this.formData.opinion = this.formData.list[0].opinion;
      this.formData.state = state;
      if (
        this.formData.foreignKeyId === undefined ||
        this.formData.foreignKeyId === null ||
        this.formData.foreignKeyId === 0 ||
        this.multipleTable === null ||
        this.multipleTable.length === 0
      ) {
        this.$message.error("请选择供应商");
        return false;
      }
      for (let i = 0; i < this.formData.detectionList.length; i++) {
        if (
          this.formData.detectionList[i].score === undefined ||
          this.formData.detectionList[i].score === null
        ) {
          this.$message.error("得分不能为空");
          return false;
        }
      }
      if (this.formData.score < 0) {
        this.$message.error("累计得分必须大于等于0");
        return false;
      }
      if (
        Number(this.formData.opinion) !== 1 &&
        Number(this.formData.opinion) !== 2
      ) {
        this.$message.error("请选择评价意见");
        return false;
      }

      if (this.formData.id <= 0) {
        create(this.formData).then((res) => {
          this.closeDialog();
        });
      } else {
        update(this.formData).then((res) => {
          this.closeDialog();
        });
      }
    },
    handleInput(row) {
      const reg = /^[0-9]\d*$/; // 匹配大于0的数字
      if (!reg.test(row.score)) {
        row.score = "";
      }

      if (row.score > row.scoreLine) {
        row.score = "";
        this.$message.error("得分不能大于分数上线");
      }

      var score = 0;
      for (let i = 0; i < this.formData.detectionList.length; i++) {
        score = score + Number(this.formData.detectionList[i].score);
      }
      this.formData.list[0].score = score;
    },
  },
};
</script>
